<template>
    <van-sticky>
        <van-nav-bar title="拼团" left-text="返回" left-arrow @click-left="onBack" v-if="proid">
        </van-nav-bar>

        <van-nav-bar title="拼团" v-else>
        </van-nav-bar>

        <van-search v-model="keyword" @search="onSearch" placeholder="请输入搜索关键词" />
    </van-sticky>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-card v-for="item in list" :key="item.id" :title="item.products.name">
                <template #thumb>
                    <router-link :to="{ path: '/product/product/info', query: { proid: item.products.id } }">
                        <van-image width="88" height="88" fit="cover" :src="item.products.thumb_cdn" />
                    </router-link>
                </template>
                <template #desc>
                    <div class="total">拼团人数：{{ item.total }}人</div>
                </template>

                <template #price>
                    <div class="price">拼团价格：￥{{ item.products.team }}</div>
                </template>

                <template #tags>
                    <div class="time">
                        拼团时间：{{ item.createtime_text }}（开始）- {{ item.endtime_text }}（结束）
                    </div>
                </template>

                <template #footer>
                    <van-button size="small" type="danger">参与拼团</van-button>
                    <van-button size="small" type="warning" @click="ToTeamInfo(item.id)">查看详情</van-button>
                </template>
            </van-card>

        </van-list>
    </van-pull-refresh>

    <div style="height: 50px;"></div>
    <Footer />
</template>

<script setup>
import Footer from '@/components/common/Footer.vue';
const { proxy } = getCurrentInstance();

const proid = ref(proxy.$route.query.proid ?? 0);
const refreshing = ref(false);// 是否下拉刷新
const finished = ref(false);// 上拉加载完成
const loading = ref(false);// 是否处于懒加载状态
const list = ref([]);
const listCount = ref(0);
const page = ref(1);
const keyword = ref('');  //搜索输入

const onSearch = () => {
    onRefresh()
}

const onRefresh = () => {
    list.value = [];
    page.value = 1;
    finished.value = false;
    loading.value = true;

    setTimeout(onLoad, 1500);
}

//懒加载
const onLoad = async () => {
    if (refreshing.value) {
        refreshing.value = false;
    }

    let params = {
        proid: proid.value,
        page: page.value,
        keyword: keyword.value
    }

    let result = await proxy.$post({
        url: '/product/team/index',
        params
    })
    
    if (result.code === 1) {
        list.value = list.value.concat(result.data.list);
        listCount.value = result.data.count;

        finished.value = false;
        loading.value = false;

        if (list.value.length === listCount.value) {
            finished.value = true;

            return false;
        }
        page.value = page.value + 1;
    } else {
        finished.value = true;

        proxy.$NotifyWarn(result.msg);

        return false;
    }
}

//查看详情
const ToTeamInfo = (teamid) => {
    proxy.$router.push({path:'/product/team/info',query:{teamid}});
}

const onBack = () => proxy.$router.back();
</script>